<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>功能域管理</title>
    <link rel="stylesheet" type="text/css" href="/static/layui/css/layui.css" />
    <style>
        body { font-family: Arial, sans-serif; }
        .container { width: 99%; margin: 0 auto; margin-top: 8px;}
        .header-container { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;margin-top: 8px; }
        .form-group { margin-bottom: 15px; }
        .form-group label { display: block; margin-bottom: 5px; }
        .form-group input, .form-group select { width: 100%; padding: 8px; box-sizing: border-box; }
        .btn { padding: 10px 15px; background-color: #007BFF; color: white; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; }
        .btn:hover { background-color: #0056b3; }
        table { width: 100%; border-collapse: collapse; margin-top: 20px; }
        table, th, td { border: 1px solid #ddd; }
        th, td { padding: 10px; text-align: left; }
        th { background-color: #f2f2f2; }
        .top-right-btn { position: absolute; top: 20px; left: 20px; }
        .auto-wrap {
            white-space: pre-wrap; /* 保留空白符序列，但是正常地进行换行 */
            word-wrap: break-word; /* 在长单词或 URL 地址内部进行换行 */
            max-width: 100%; /* 确保内容不会溢出单元格 */
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="layui-form" id="table-list">
            <table class="layui-hide" id="itemTable" lay-filter="itemTable"></table>
        </div>
    </div>

    <script type="text/html" id="barDemo">
        <div class="layui-clear-space">
            <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delete">删除</a>
        </div>
    </script>

    <script src="/static/js/layui.js" type="text/javascript" charset="utf-8"></script>
    <script src="/static/js/common.js" type="text/javascript" charset="utf-8"></script>
    <script>
        // 全局函数：显示大图
        window.showBigImage = function(src) {
            layer.open({
                type: 1,
                title: 'ITEM 数据流图',
                closeBtn: 1,
                shadeClose: true,
                area: ['65%', '65%'],
                content: '<img src="' + src + '" style="max-width: 100%; max-height: 100%; display: block; margin: auto;">'
            });
        };

        layui.use(['table', 'form', 'layer'], function () {
            var table = layui.table;
            var form = layui.form;
            var layer = layui.layer;
            // 计算表格的高度
            var tableHeight = window.innerHeight - 20; // 减去其他元素的高度和一些边距
            // 渲染表格
            table.render({
                elem: '#itemTable',
                url: '/getItemTable',
                height: tableHeight,
                toolbar: '#toolbarHeader',
                page: true,
                limit: 10,
                limits: [10, 20, 50, 100],
                {#style: 'height: 150%;', // 调整表格整体高度#}
                lineStyle: 'height: 200%;', // 设置行高为原来的2倍
                cols: [[
                    {field: 'id', title: 'ID', width: 50, sort: true, align: 'center', hide:true},
                    {type: 'numbers', title: '序号', width: 60, align: 'center'}, // 添加'序号'列
                    {field: 'name', title: 'ITEM', width: 110, align: 'center'},
                    {field: 'number', title: '编号', width: 70, align: 'center', hide:true},
                    {field: 'desc', title: '描述', width: 260, align: 'center'},
                    {field: 'data_flow', title: '数据流', width: 300, align: 'center', templet: function(d) {
                        return '<div class="auto-wrap" >' + d.data_flow + '</div>';
                    }},
                    {field: 'plant_uml', title: 'PlantUML', width: 250, align: 'center', edit: 'textarea', templet: function(d) {
                        return '<div class="auto-wrap" >' + d.plant_uml + '</div>';
                    }, editOptions: {
                        type: 'textarea',
                        style: 'width: 100%; height: 100px;' // 设置textarea的样式
                    }},
                    {field: 'file', title: '数据流图', width: 350, align: 'center', templet: function(d) {
                        if (d.file) {
                            return '<img src="' + d.file + '" style="max-width: 300px; max-height: 200px; cursor: pointer;" onclick="showBigImage(this.src)">';
                        }
                        return '';
                    }},
                    {field: 'ecu_list', title: '相关零部件(ECU)', width: 300, align: 'left'},
                    {field: 's1', title: '影响级别(S)', width: 100, align: 'left'},
                    {field: 's2', title: '描述(S)', width: 230, align: 'left'},
                    {field: 'f1', title: '影响级别(F)', width: 100, align: 'left'},
                    {field: 'f2', title: '描述(F)', width: 230, align: 'left'},
                    {field: 'o1', title: '影响级别(O)', width: 100, align: 'left'},
                    {field: 'o2', title: '描述(O)', width: 230, align: 'left'},
                    {field: 'p1', title: '影响级别(P)', width: 100, align: 'left'},
                    {field: 'p2', title: '描述(P)', width: 230, align: 'left'}
                ]],
                done: function () {
                    console.log('表格渲染完成');
                }
            });

            // 表格编辑事件
            table.on('edit(itemTable)', function (obj) {
                var value = obj.value // 得到修改后的值
                    , data = obj.data // 得到所在行所有键值
                    , field = obj.field; // 得到字段

                // 发送更新请求
                fetch('/updateItemUML', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        id: data.id,
                        field: field,
                        value: value
                    })
                })
                .then(response => response.json())
                .then(data => {
                    layer.msg(data.msg);
                    table.reload('itemTable');
                });
            });

            // 表格工具栏事件
            table.on('tool(itemTable)', function (obj) {
                var data = obj.data;
                switch (obj.event) {
                    case 'edit':
                        editItem(data);
                        break;
                    case 'delete':
                        deleteItem(data.id);
                        break;
                }
            });

            // 删除功能域
            window.deleteItem = function (id) {
                layer.confirm('确定删除该功能域吗？', {
                    btn: ['确定', '取消']
                }, function () {
                    console.log('删除该功能域',id);
                    fetch(`/deleteItem/${id}`, {
                        method: 'DELETE'
                    })
                    .then(response => response.json())
                    .then(data => {
                        layer.msg(data.msg);
                        table.reload('itemTable');
                    });
                }, function () {
                    layer.msg('已取消删除');
                });
            };

            // 添加功能域
            window.addItem = function () {
                layer.open({
                    title: '新增功能域',
                    type: 2,
                    content: '/addItemForm',
                    area: ['400px', '400px'],
                    btn: ['确认', '取消'],
                    yes: function (index, layero) {
                        var iframeWindow = window['layui-layer-iframe' + index];
                        var submitForm = iframeWindow.document.getElementById('itemForm');
                        var formData = new FormData(submitForm);
                        fetch('/addItem', {
                            method: 'POST',
                            body: formData
                        })
                        .then(response => response.json())
                        .then(data => {
                            layer.msg(data.msg);
                            table.reload('itemTable');
                            layer.close(index);
                        });
                    },
                    btn2: function (index, layero) {
                        layer.close(index);
                    }
                });
            };

            // 编辑功能域
            window.editItem = function (item) {
                layer.open({
                    title: '编辑功能域',
                    type: 2,
                    content: '/editItemForm?id=' + item.id,
                    area: ['400px', '400px'],
                    btn: ['确认', '取消'],
                    yes: function (index, layero) {
                        var iframeWindow = window['layui-layer-iframe' + index];
                        var submitForm = iframeWindow.document.getElementById('itemForm');
                        var formData = new FormData(submitForm);
                        formData.append('id', item.id);
                        fetch('/editItem', {
                            method: 'POST',
                            body: formData
                        })
                        .then(response => response.json())
                        .then(data => {
                            layer.msg(data.msg);
                            table.reload('itemTable');
                            layer.close(index);
                        });
                    },
                    btn2: function (index, layero) {
                        layer.close(index);
                    }
                });
            };


        });
    </script>
</body>
</html>